<script lang="ts" setup>
import {ref, shallowRef, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

const
    props = defineProps({
      Height: {
        type: String,
        default: '500px'
      },
      Value: {
        type: String,
        default: ''
      },
      open: {
        type: Boolean,
        default: false
      },
      defaultConfig: {
        type: Object,
        default: {placeholder: '请输入内容...'}
      }
    }),
    editorRef = shallowRef(), // 编辑器实例，必须用 shallowRef
    $emit = defineEmits(["update:modelValue"]),
    html = ref(props.Value) // 内容 HTML
;
watch(() => props.open, (newData, oldData) => {
  if (newData || oldData == undefined) {
    html.value = props.Value
  } else {
    html.value = ''
  }
}, {immediate: true})

//方法
const
    handleCreated = (editor: any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
      editorRef.value.on('change', handleChange)
    },
    handleChange = () => {
      //去除html标签，只留下纯文本
      // $emit("update:modelValue", html.value.replace(/<[^>]+>/g, "").replace(/&[^;]+;/g, ""))
      $emit("update:modelValue", html.value)
    }
;
</script>
<template>
  <div>
    <div style="border: 1px solid #ccc">
      <Toolbar :editor="editorRef" mode="default" style="border-bottom: 1px solid #ccc"/>
      <Editor v-model="html" :defaultConfig="defaultConfig" :style="{height:Height}" mode="default"
              style="overflow-y: hidden;" @onCreated="handleCreated"/>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
